<template>
  <div class="out-container link"
       :class="{border:border}"
       @click="onCellClick"
  >
    <div
        class="cell">
      <div class="left">
        <p>{{ title }}</p>

      </div>
      <div class="right">
        <p>{{ content }}</p>
        <img v-if="rightIcon" src="@/assets/vant-icon/arrow.png" alt="">
      </div>
    </div>
    <p v-if="description" class="description">{{ description }}</p>
  </div>

</template>

<script>
import './cell.less'

export default {
  name: "cell",
  props: {
    title: {
      type: String,
      default: '标题'
    },
    content: {
      type: String,
      default: '内容'
    },
    rightIcon: Boolean,
    description: {
      type: String,
      default: ''
    },
    border: {
      type: Boolean,
      default: true
    },
    to: {
      type: String,
      default: ''
    }
  },
  methods: {
    onCellClick() {
      this.to ? this.$router.push(this.to) : console.log('no')
    }
  }
}
</script>

<style scoped>

</style>